<template> 
    <div class="add-app">
        <!-- 滚动内容 start -->
        <el-scrollbar class="app-container-scroll-bar">
            
            <pageTitle :hasBack="true" :title="pageTitle" ></pageTitle>
			
			<card :data="cardData" icon-class="icon-cangku"></card>

            <deployConfig
				ref="deployConfig"
				:deployTypeProp="deployType"
				:templateTypeProp="templateType"
                :isClone="isClone"
				></deployConfig>

            <el-row style="margin:20px">
				<el-col align="right">
					<el-button
						:disabled="loading"
						 type="primary" @click="startClone">
						立即克隆
					</el-button>
				</el-col>
			</el-row>
        </el-scrollbar>
        <!-- 滚动内容 end -->
    </div>
</template>
<script>	
import pageTitle from "@/view/layout/components/content/pageTitle";
import card from '@/view/components/card/detailCard.vue';
import { getTemplateById } from '@/service/swagger/AcTemplateController';
import { deployTypeFilter } from '@/filters/status/index';
import { tmpStatusFilter } from '@/filters/status/index';
import deployConfig from "../../yingyong/deploy/deployConfig";
import { clone } from '@/service/swagger/InstanceController';
export default {
    components: {
        pageTitle,
        card,
        deployConfig,
    },
    data() {
        return {
            pageTitle: "实例克隆",
            loading: false,
            id: this.$route.query.id,
            templateType: this.$route.query.templateType,
            deployType: this.$route.query.deployType,
            instId: this.$route.query.instId,
            cardData: null,
            pageData: {},
            formData: {},
            cardConfig: {
                name: '名称',
                appType: "应用类型",
                appVersion: '当前版本',
                status: '状态',
                deployType: '部署类型',
                instCounts: "实例数",
                createTime: '创建日期',
                repositoryType: "仓库类型",
            },
            isClone:true,
        }
    },
    mounted() {
        this.initPage();
    },
    methods: {
        initPage() {
            if (!this.id) {
                return;
            }
            getTemplateById(this.id).then(ret => {
                if (!ret.code && ret.data) {
                    this.pageData = ret.data;
                    this.appType = ret.data.appType
                    this.initCardData();
                    this.$refs.deployConfig.initConfigs(this.pageData);
                    this.$refs.deployConfig.initTypes(this.pageData);

                }
            })
        },
        initCardData() {
            let data = {};
            for (let i in this.pageData) {
                const _name = this.cardConfig[i]
                if (_name) {
                    if (i == 'status') {
                        data[_name] = {
                            html: tmpStatusFilter(this.pageData[i])
                        };
                    } else if (i == 'deployType') {
                        data[_name] = {
                            html: deployTypeFilter(this.pageData[i], this.pageData.templateType)
                        };
                    } else {
                        data[_name] = this.pageData[i];
                    }
                }
            }
            this.cardData = data;
        },
        startClone() {
            this.$refs.deployConfig.validateForm({
                onSuccess: (data) => {
                    this.formData = data;
                    this.postCloneSubmit()
                },
                onError: (index) => {

                }
            })
        },
        postCloneSubmit() {
            const formData = this.formData;
            console.log(formData, 1212)
            this.loading = true;
            let params = {
                instId: this.instId,
                appName: formData.appName,
                clusterName: formData.clusterName,
                ips: formData.ips,
            }
            clone(params).then(ret => {
                this.loading = false;
                if (!ret.code) {
                    console.log("克隆成功!")
                    this.$router.push({
                        path:"/sl/yy"
                    })
                }
            })
        }

    }
}
</script>
